<template>
  <div>
    <div class="fixHead">
      <div class="title">
        <span class="iconfont icon-jiantou" @click="$router.go(-1)"></span>
        <span class="icon-home" @click="$router.push('/')"></span>
        <h1>社群主页</h1>
        <span class="rightBtn" @click="show2 = true">•••</span>
      </div>
      <div style="height: 0.88rem;"></div>
    </div>
    <div>
      <div class="comInfo">
        <img class="logo" src="../../assets/images/adver.jpg" />
        <p class="number">社群号：111111</p>
        <div class="bg">
          <div class="com">
            <div class="name">
              <span>蚂蚁金服</span>
              <div @click="toEdit">
                <img src="../../assets/images/mkf/edit.png" />
              </div>
              <!-- <span class="focus">+关注</span> -->
              <!-- <span class="focus focused">已关注</span> -->
            </div>
            <div class="txt">
              每一个认真生活的人，都值得被认真对待，每一个认真生活的人，都值
            </div>
          </div>
          <div class="people" @click="show = true">
            <img class="head" src="../../assets/images/adver.jpg" />
            <div class="cont">
              <div class="name">
                <span>麻小云</span>
                <span class="tag">社群创始人</span>
              </div>
              <div class="txt">
                阿里巴巴创始人/慈善会会长/蚂蚁阿里巴巴创始人/慈善会会长/蚂蚁
              </div>
            </div>
            <div class="btn">联系ta</div>
          </div>
        </div>
      </div>
      <div class="menu">
        <!-- 仅创建者有此按钮 -->
        <div class="item" @click="toArticleUpdate">
          <div>
            <img
              src="../../assets/images/mkf/comA.png"
              style="width: 0.47rem;"
            />
          </div>
          <p>相关推文</p>
        </div>
        <div class="item" @click="toIntro">
          <div>
            <img
              src="../../assets/images/mkf/comB.png"
              style="width: 0.39rem;"
            />
          </div>
          <p>社群简介</p>
        </div>
        <div class="item" @click="toUrl('devote')">
          <div>
            <img
              src="../../assets/images/mkf/comC.png"
              style="width: 0.51rem;"
            />
          </div>
          <p>社群贡献榜</p>
        </div>
        <div class="item" @click="toUrl('link')">
          <div>
            <img
              src="../../assets/images/mkf/comD.png"
              style="width: 0.47rem;"
            />
          </div>
          <p>关联社群</p>
        </div>
        <div class="item" @click="toUrl('member')">
          <div>
            <img
              src="../../assets/images/mkf/comE.png"
              style="width: 0.48rem;"
            />
          </div>
          <p>社群成员</p>
        </div>
      </div>
      <div class="notice" @click="toNotice">
        <img src="../../assets/images/mkf/notice.png" />
        <span class="txt"
          >社群公告社群公告社群公告社群公社群公告社群公告社群公告社群公</span
        >
        <span class="iconfont icon-jiantou"></span>
      </div>
      <div class="article">
        <div class="title">
          <span class="left">社群推文</span>
          <span class="right" @click="toType">管理</span>
        </div>
        <div class="list" v-if="articleList.length > 0">
          <router-link
            :to="`/com/articleList?id=${item.id}&name=${item.name}`"
            class="item"
            v-for="(item, index) in articleList"
            :key="index"
          >
            <span>{{ item.name }}</span
            ><span class="iconfont icon-jiantou"></span>
          </router-link>
        </div>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="homepageBtns">
      <div class="item" @click="toApply">申请追随该社群</div>
      <div class="item yellow" @click="toApply">申请加入该社群</div>
    </div>
    <!-- 弹窗 -->
    <yd-popup
      v-model="show"
      position="center"
      width="100%"
      masker-opacity="0.7"
    >
      <div class="myCard">
        <div class="card">
          <div class="wrap">
            <div class="top">
              <img class="head" src="../../assets/images/adver.jpg" />
              <div class="info">
                <div class="name">
                  <span>麻小云</span>
                </div>
                <div class="des">
                  阿里巴巴创始人/慈善会会长/蚂蚁金服执行董事
                </div>
              </div>
            </div>
            <div class="link">
              <div class="item" style="align-items: center;">
                <img class="icon" src="../../assets/images/mkf/link1.png" />
                <span class="name1">手机:</span>
                <span class="name2">15512345678</span>
                <span class="btn">拨打</span>
              </div>
              <div
                class="item"
                style="align-items: center;margin-bottom: 0.28rem;"
              >
                <img class="icon" src="../../assets/images/mkf/link2.png" />
                <span class="name1">邮箱:</span>
                <span class="name2">15512345678@qq.com</span>
                <span class="btn">复制</span>
              </div>
              <div class="item">
                <img class="icon" src="../../assets/images/mkf/link3.png" />
                <span class="name1">微信:</span>
                <div class="qrcode">
                  <div><img src="../../assets/images/kefu.jpg" /></div>
                  <p>点击查看大图</p>
                </div>
              </div>
            </div>
            <div class="txt">
              我们的本质都是自己的英雄。在生命中很多日子里，不得不被或主动看清自己平凡小弱的事实，但在真相之后，我们依旧紧握梦想，勇敢地追求更好的自己。这件事本身就充满了意义。
            </div>
          </div>
        </div>
      </div>
      <img
        @click.stop="show = false"
        src="../../assets/images/mkf/icon_close.png"
        class="closePopup"
      />
    </yd-popup>

    <!-- 操作 -->
    <yd-actionsheet :items="myItems" v-model="show2"></yd-actionsheet>
  </div>
</template>

<script>
import { Popup } from "vue-ydui/dist/lib.rem/popup";
import { ActionSheet } from "vue-ydui/dist/lib.rem/actionsheet";
export default {
  name: "",
  components: {
    ydPopup: Popup,
    ydActionsheet: ActionSheet
  },
  props: {},
  data: function() {
    return {
      show: false,
      show2: false, //右上角...
      myItems: [],
      articleList: [
        {
          id: 1,
          name: "社群推文1"
        },
        {
          id: 2,
          name: "分类名称2"
        }
      ]
    };
  },
  mounted: function() {
    console.log(this.$route.query);
    this.myItems = [
      {
        label: "退出该社群",
        callback: () => {
          this.$dialog.toast({
            mes: "退出该社群"
          });
        }
        //stay: true /* 不关闭 */
      },
      {
        label: "取消追随该社群",
        callback: () => {
          this.$dialog.toast({
            mes: "取消追随该社群"
          });
        }
      }
    ];
  },
  methods: {
    toEdit() {
      this.$router.push({
        path: "/com/edit",
        query: {
          id: 1
        }
      });
    },
    toNotice() {
      this.$router.push({
        path: "/com/notice",
        query: {}
      });
    },
    toType() {
      this.$router.push({
        path: "/com/articleType"
      });
    },
    toArticleUpdate() {
      this.$router.push({
        path: "/com/articleUpdate"
      });
    },
    toIntro() {
      //所有人可点击进入
      this.$router.push({
        path: "/com/intro",
        query: {
          id: 1
        }
      });
    },
    toUrl(v) {
      //非社群成员，点击提示
      // this.$dialog.toast({ mes: "加入社群才能查看哦" });
      // return;
      this.$router.push({
        path: "/com/" + v,
        query: {
          id: 1
        }
      });
    },
    toApply() {
      this.$router.push({
        path: "/com/apply"
      });
    }
  }
};
</script>

<style scoped>
.homepageBtns {
  width: 100%;
  height: 0.98rem;
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
}

.homepageBtns .item {
  flex: 1;
  background-color: #4e464b;
  height: 100%;
  font-size: 0.32rem;
  line-height: 0.98rem;
  color: #deaa8a;
  text-align: center;
}

.homepageBtns .item.yellow {
  background-color: #deaa8a;
  color: #2a2631;
}

.closePopup {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  margin: 0.78rem auto 0;
}

.myCard {
  padding-top: 0.2rem;
}

.myCard .card .wrap .link {
  padding: 0.3rem 0 0 0.36rem;
}

.myCard .card .wrap .link .item {
  margin-bottom: 0.24rem;
}

.myCard .card .wrap .link .item:last-child {
  margin-bottom: 0.3rem;
}

.myCard .card .wrap .link .item .name2 {
  display: block;
  width: 3.74rem;
}

.myCard .card .wrap .link .item .name1 {
  width: 0.68rem;
}

.myCard .card .wrap .link .item .btn {
  display: block;
  width: 1rem;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  background-color: #2a2631;
  border-radius: 0.06rem;
  font-size: 0.24rem;
  color: #deaa8a;
}

.myCard .card .wrap .txt {
  max-height: 1.44rem;
  overflow-y: scroll;
}

.notice {
  width: 7.1rem;
  height: 0.88rem;
  display: flex;
  align-items: center;
  background-color: #32303a;
  border-radius: 0.1rem;
  margin: 0 auto 0.3rem;
}

.notice img {
  display: block;
  width: 0.54rem;
  margin: 0 0.2rem 0 0.3rem;
}

.notice .txt {
  display: block;
  width: 5.46rem;
  font-size: 0.28rem;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 0.3rem;
}

.notice .iconfont {
  font-size: 0.28rem;
  color: #666;
}

.article .title {
  padding: 0.15rem 0.2rem 0.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article .title .left {
  position: relative;
  padding-left: 0.3rem;
  height: 0.36rem;
  line-height: 0.36rem;
  font-size: 0.28rem;
  font-weight: bold;
  color: #deaa8a;
}

.article .title .left::after {
  content: "";
  width: 0.08rem;
  height: 0.26rem;
  background-color: #deaa8a;
  border-radius: 0.02rem;
  position: absolute;
  top: 0.05rem;
  left: 0;
}

.article .title .right {
  font-size: 0.28rem;
  line-height: 0.36rem;
  color: #666666;
  padding: 0 0.3rem;
}

.article .list {
  padding: 1px 0.2rem 0.6rem;
}

.article .list .item {
  display: block;
  height: 1.1rem;
  background-color: #32303a;
  border-radius: 0.1rem;
  padding: 0 0.26rem 0 0.3rem;
  font-size: 0.32rem;
  color: #ffffff;
  line-height: 1.1rem;
  margin-bottom: 0.08rem;
}

.article .list .item .iconfont {
  font-size: 0.32rem;
  color: #666;
  float: right;
}

.fixHead .title {
  background-color: #2a2631;
}

.comInfo {
  padding: 0.1rem 0.2rem 0.2rem 0.1rem;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  position: relative;
}

.comInfo .logo {
  position: absolute;
  top: 0.1rem;
  left: 0.1rem;
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 0.2rem;
  border: solid 0.1rem #2a2631;
  z-index: 1;
  object-fit: cover;
}

.comInfo .number {
  padding: 0.03rem 0 0.11rem;
  font-size: 0.24rem;
  line-height: 0.34rem;
  color: #999999;
  text-align: right;
  position: absolute;
  top: 0.1rem;
  right: 0.2rem;
}

.comInfo .bg {
  width: 6.8rem;
  box-shadow: 0px 0px 0.3rem 0px rgba(222, 170, 138, 0.3);
  border-radius: 0.2rem;
  background-image: linear-gradient(90deg, #fae9db 0%, #e8b596 100%),
    linear-gradient(#deaa8a, #deaa8a);
  background-image: -webkit-linear-gradient(0deg, #fae9db 0%, #e8b596 100%),
    linear-gradient(#deaa8a, #deaa8a);
  background-blend-mode: normal, normal;
  margin-top: 0.48rem;
}

.comInfo .bg .com {
  padding: 0 0.3rem 0 1.84rem;
}

.comInfo .bg .com .name {
  width: 4.66rem;
  padding: 0.28rem 0 0.15rem;
  display: flex;
  align-items: flex-end;
  position: relative;
}

.comInfo .bg .com .name span {
  display: inline-block;
  font-size: 0.44rem;
  line-height: 0.48rem;
  font-weight: bold;
  color: #2a2631;
}

.comInfo .bg .com .name .focus {
  font-size: 0.24rem;
  line-height: 0.36rem;
  font-weight: normal;
  color: #2a2631;
  width: 1rem;
  height: 0.4rem;
  border-radius: 0.06rem;
  border: solid 0.02rem #2a2631;
  text-align: center;
  position: absolute;
  top: 0.32rem;
  right: 0;
}

.comInfo .bg .com .name .focus.focused {
  border-color: rgba(42, 38, 49, 0.3);
  color: rgba(42, 38, 49, 0.5);
}

.comInfo .bg .com .name div {
  padding: 0 0.2rem;
  height: 0.3rem;
  display: flex;
  align-items: center;
}

.comInfo .bg .com .name div img {
  display: inline-block;
  width: 0.24rem;
}

.comInfo .bg .com .txt {
  width: 4.66rem;
  font-size: 0.28rem;
  line-height: 0.34rem;
  color: #2a2631;
  opacity: 0.7;
  margin-bottom: 0.26rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 0.68rem;
}

.comInfo .bg .people {
  width: 6.2rem;
  margin: 0 auto;
  border-top: 1px solid rgba(42, 38, 49, 0.1);
  padding: 0.3rem 0;
  display: flex;
  align-items: center;
}

.comInfo .bg .people .head {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  margin-right: 0.2rem;
  object-fit: cover;
}

.comInfo .bg .people .cont {
  width: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.comInfo .bg .people .cont .name {
  display: flex;
  align-items: center;
}

.comInfo .bg .people .cont .name span {
  font-size: 0.32rem;
  font-weight: bold;
  line-height: 0.4rem;
  color: #2a2631;
}

.comInfo .bg .people .cont .name .tag {
  display: inline-block;
  background-color: rgba(42, 38, 49, 0.1);
  width: 1.2rem;
  height: 0.32rem;
  border-radius: 0.04rem;
  font-size: 0.2rem;
  color: #2a2631;
  font-weight: normal;
  line-height: 0.32rem;
  text-align: center;
  margin-left: 0.2rem;
}

.comInfo .bg .people .cont .txt {
  font-size: 0.24rem;
  line-height: 0.34rem;
  color: #2a2631;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comInfo .bg .people .btn {
  width: 1rem;
  height: 0.4rem;
  background-color: #2a2631;
  border-radius: 0.06rem;
  color: #deaa8a;
  font-size: 0.24rem;
  line-height: 0.4rem;
  text-align: center;
  margin-left: 0.2rem;
}

.menu {
  padding: 0.15rem 0 0.3rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.menu .item div {
  display: block;
  width: 0.9rem;
  height: 0.47rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu .item p {
  margin-top: 0.06rem;
  font-size: 0.24rem;
  line-height: 0.44rem;
  text-align: center;
  color: #f9e7d8;
}
</style>
<style>
.yd-actionsheet {
  background-color: #32303a;
}

.yd-actionsheet-item {
  background-color: #32303a;
  height: 1.2rem;
  line-height: 1.2rem;
  font-size: 0.32rem;
  color: #999999;
}

.yd-actionsheet-item:after {
  background: rgba(255, 255, 255, 0.1);
}
</style>
